<template>
  <div class="chat-container">
    <div class="chat-header">
      <h2 class="chat-title">设备故障AI诊断</h2>
    </div>

    <div class="chat-subheader">
      <span class="assistant-title">智能客服小星</span>
    </div>

    <div class="chat-messages" ref="messagesContainer">
      <div class="chat-message-row vip-message">
        <span class="vip-badge">优雅草星云智控专属智能客服小星 为您服务</span>
      </div>

      <div class="chat-message-row assistant-message">
        <div class="avatar">
          <img src="@/assets/logo.png" alt="机器人" />
        </div>
        <div class="message-content">
          <div class="message-bubble">
            Hi，我是你的专属智能助理小蜜，有问题请随时找我哦～
          </div>
        </div>
      </div>

      <div v-for="(message, index) in messages" :key="index" class="chat-message-row" :class="message.type">
        <div class="avatar">
          <img :src="message.type === 'user-message' ? userAvatar : botAvatar"
            :alt="message.type === 'user-message' ? '用户' : '机器人'" />
        </div>
        <div class="message-content">
          <div class="message-bubble">{{ message.content || "加载中..." }}</div>
        </div>
      </div>
    </div>

    <div class="chat-input-container">
      <div class="action-buttons">
        <button class="action-button service-button">
          <span class="button-icon">😊</span>
          <span class="button-text">联系人工客服</span>
          <span class="notification-dot"></span>
        </button>

        <div class="quick-replies">
          <button class="quick-reply-button">短语1</button>
          <button class="quick-reply-button">短语2</button>
          <button class="quick-reply-button">短语3</button>
        </div>
      </div>

      <div class="input-wrapper">
        <input type="text" v-model="inputMessage" placeholder="请输入..." class="message-input"
          @keyup.enter="sendMessage" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from "vue";
import userAvatarSrc from "@/assets/images/ai.png";
import botAvatarSrc from "@/assets/logo.png";
import { chatWithDeepSeekStream } from "@/api/deepseek";

const inputMessage = ref("");
const messages = ref([]);
const messagesContainer = ref(null);
const userAvatar = userAvatarSrc;
const botAvatar = botAvatarSrc;

const sendMessage = async () => {
  if (!inputMessage.value.trim()) return;

  // Add user message
  messages.value.push({
    content: inputMessage.value,
    type: "user-message",
  });
  messages.value.push({
    content: ``,
    type: "assistant-message",
  });
  const userInput = inputMessage.value;
  inputMessage.value = "";

  // // Wait for DOM to update
  // await nextTick();
  // scrollToBottom();
  chatWithDeepSeekStream(`设备故障诊断：${userInput}`, (message) => {
    // 将 AI 的回复逐字添加到聊天记录
    messages.value[messages.value.length - 1].content += message;
    scrollToBottom();
  });
};

const scrollToBottom = () => {
  if (messagesContainer.value) {
    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
  }
};

onMounted(() => {
  scrollToBottom();
});
</script>

<style lang="scss" scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  // max-width: 800px;
  height: 840px;
  margin: 0 auto;
  background-color: #f5f5f5;
  border-radius: 8px;
  overflow: hidden;
  // box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

  @media (max-width: 768px) {
    max-width: 100%;
    border-radius: 0;
    height: 100vh;
  }
}

.chat-header {
  background-color: #fff;
  padding: 12px 16px;
  border-bottom: 1px solid #e8e8e8;

  .chat-title {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    color: #333;
  }
}

.chat-subheader {
  background-color: #fff;
  padding: 8px 16px;
  border-bottom: 1px solid #f0f0f0;

  .assistant-title {
    font-size: 14px;
    color: #666;
  }
}

.chat-messages {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vip-message {
  align-self: center;
  margin-bottom: 8px;

  .vip-badge {
    display: inline-block;
    background-color: #f8f4e8;
    color: #dda550;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
  }
}

.chat-message-row {
  display: flex;
  margin-bottom: 16px;

  &.user-message {
    flex-direction: row-reverse;

    .message-bubble {
      background-color: #1989fa;
      color: white;
      border-radius: 16px 4px 16px 16px;
    }
  }

  &.assistant-message {
    .message-bubble {
      background-color: white;
      border-radius: 4px 16px 16px 16px;
    }
  }

  .avatar {
    width: 36px;
    height: 36px;
    margin: 0 8px;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
    }
  }

  .message-content {
    max-width: 70%;

    .message-bubble {
      padding: 10px 14px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
      font-size: 14px;
      line-height: 1.5;
      word-break: break-word;
      white-space: pre-line;
    }
  }
}

.chat-input-container {
  background-color: white;
  border-top: 1px solid #e8e8e8;
  padding: 8px;
}

.action-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;

  .service-button {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    color: #ff6700;
    font-size: 14px;
    cursor: pointer;
    padding: 6px 10px;
    position: relative;

    .button-icon {
      margin-right: 4px;
    }

    .notification-dot {
      position: absolute;
      top: 2px;
      right: 2px;
      width: 8px;
      height: 8px;
      background-color: #ff4d4f;
      border-radius: 50%;
    }
  }

  .quick-replies {
    display: flex;
    gap: 8px;

    .quick-reply-button {
      border: 1px solid #e8e8e8;
      background-color: white;
      color: #666;
      border-radius: 16px;
      padding: 4px 12px;
      font-size: 12px;
      cursor: pointer;

      &:hover {
        background-color: #f5f5f5;
      }
    }
  }
}

.input-wrapper {
  position: relative;

  .message-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;

    &:focus {
      border-color: #1989fa;
    }
  }
}
</style>